<template>
  <n-card :bordered="false" class="proCard">
    <BasicTable
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="tableActionRef"
      :actionColumn="tableActionColumn"
      :scroll-x="920"
    >
      <template #tableTitle>
        <n-button type="primary" @click="dialogShow = true">
          添加记录
        </n-button>
      </template>
    </BasicTable>

    <n-modal
      v-model:show="dialogShow"
      style="width: 400px"
      preset="card"
      title="添加黑名单记录"
      size="medium"
      :bordered="false"
    >
      <n-form
        ref="formRef"
        label-placement="left"
        size="large"
        :model="formParam"
        :rules="rules"
      >
        <n-form-item path="type">
          <n-input-group>
            <n-input-group-label style="height: 40px; line-height: 40px">类型</n-input-group-label>
            <n-select v-model:value="formParam.type" :options="options" />
          </n-input-group>
        </n-form-item>
        <n-form-item path="target">
          <n-input-group>
            <n-input-group-label style="height: 40px; line-height: 40px">目标</n-input-group-label>
            <n-input @keyup.enter="handleSubmit" v-model:value="formParam.target" placeholder="请输入目标" />
          </n-input-group>
        </n-form-item>
        <n-form-item>
          <n-button type="primary" @click="handleSubmit" size="large" :loading="loading" block>
            提交
          </n-button>
        </n-form-item>
      </n-form>
    </n-modal>

  </n-card>
</template>

<script lang="ts" setup>
import {h, reactive, ref} from 'vue';
import {NButton, useDialog, useMessage} from "naive-ui";
import {columns} from "@/views/system/black/columns";
import {BasicTable, TableAction} from '@/components/Table';
import {addBlack, BlackTypeEnum, getBlackPage, removeBlack} from "@/api/system/black";
import {useUserStore} from "@/store/modules/user";
import {useGlobSetting} from "@/hooks/setting";
import {Trash} from '@vicons/ionicons5'

const global = useGlobSetting()
const userStore = useUserStore()
const message = useMessage()
const dialog = useDialog()

const tableActionRef = ref();
const tableActionColumn = reactive({
  width: 60,
  title: '操作',
  key: 'action',
  fixed: 'right',
  align: 'center',
  render(row) {
    return h(TableAction, {
      style: 'text',
      actions: [
        {
          label: '移除',
          type: 'error',
          icon: Trash,
          onClick: () => {
            dialog.warning({
              title: '警告',
              content: '确定移除该条黑名单记录？',
              positiveText: '确定',
              negativeText: '取消',
              onPositiveClick: () => {
                removeBlack(row.id)
                  .then(() => reloadTable())
                  .catch(() => dialog.destroyAll())
              },
              onNegativeClick: () => { }
            })
          }
        },
      ]
    })
  }
});

const loadDataTable = async (res) => {
  const data = await getBlackPage({pageNum: res.current, pageSize: res.size});
  // total 指的是总共多少条数据
  const { current, size, total, records } = data;
  return {
    current,
    size,
    count: Math.ceil(total / size),
    records,
  };
};

function reloadTable() {
  tableActionRef.value.reload();
}

const options = [
  {
    label: "根据 Ipv4",
    value: BlackTypeEnum.IP,
  },
  {
    label: "根据 Username",
    value: BlackTypeEnum.USER,
  }
]

// 修改内容
const dialogShow = ref(false)
const loading = ref(false);
const formRef: any = ref(null);
const formParam = reactive({
  type: BlackTypeEnum.IP,
  target: ''
})
const rules = {
  type: { required: true, message: '请选择类型', trigger: 'blur' },
  target: { required: true, message: '请输入目标', trigger: 'blur' },
};

const handleSubmit = (e) => {
  e.preventDefault();
  formRef.value.validate(async (errors) => {
    if (!errors) {
      const { type, target } = formParam
      loading.value = true;
      try {
        await addBlack({type, target})
        reloadTable()
        dialogShow.value = false
        formParam.type = BlackTypeEnum.IP
        formParam.target = ''
      } finally {
        loading.value = false;
      }
    } else {
      message.error('请填写完整信息');
    }
  });
};


</script>

<style lang="less" scoped>
:deep(.my-icon .n-button__icon) {
  margin: 0 !important;
}

:deep(div[class='n-input-group-label']) {
  --n-height: 40px !important;
}
</style>
